import React, { Component } from 'react';
import QRCode from 'qrcode.react';
import './recharge.css';

class Recharge extends Component {
  constructor(props) {
    super(props);
    this.state = {
      show: false
    };
  }

  request = window.request;

  render() {
    const { show } = this.state;
    const { name, address, tag } = this.props;
    return (
      <div className="recharge-content">
        {tag && <div>备注 <span style={{ color: '#d4a668', marginLeft: 10 }}>{tag}</span></div>}
        <div>充币地址</div>
        <ul className="address">
          <li id="re-address">{address}</li>
          <li className="copy copy-btn" data-address={address} data-clipboard-text={address}>
            复制
          </li>
          <li className="ercode">
            <div
              className="text"
              onClick={() => {
                if (address) {
                  this.setState({ show: !show });
                }
              }}
            >
              二维码
            </div>
            {show && (
              <div className="ercon">
                <QRCode
                  value={address}
                  size={110}
                  bgColor={'#ffffff'}
                  fgColor={'#000000'}
                  level={'L'}
                />
              </div>
            )}
          </li>
        </ul>
        <h4>温馨提示</h4>
        <ul>
          {tag && (
            <li>备注和地址必须填写，否则无法转账，甚至造成损失</li>
          )}
          <li>请勿向上述地址充值任何非{name}资产，否则资产将不可找回</li>
          <li>
            您充值至上述地址后，需要整个网络节点的确认，1次网络确认后到账，6次网络确认后可提币
          </li>
          {/* <li>最小充值余额：100{name}, 小于最小金额的充值将不会上账</li> */}
          <li>
            您的充值地址不会经常改变，可以重复充值，若有更改，我们会尽量通过网站公告或邮件通知你
          </li>
          <li>请务必确认电脑及浏览器安全，防止信息被篡改或泄漏</li>
        </ul>
      </div>
    );
  }
}
export default Recharge;
